<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: aqua;
            border:10px darkorchid dotted;
        /*
        1、外边距会影响到盒子的位置，不会影响盒子可见框的大小
        2、四个方向：
        margin-top上外边距，正值：元素会往下移动
        margin-right默认情况下，设置该值不会有任何效果
        margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动
        margin-left：左外边距，设置一个正值，元素会向右移动
        3、元素在页面中按照自左向右的顺序排列，所以默认情况下如果我们设置的左上则会移动自身，设置下右则会移动其他元素
        4、如果设置负值则会往相反的方向移动
        5、margin会影响到盒子实际占用空间的大小
        */
            /* margin-top:100px; */
            /* margin-left:100px; */
            /* margin-right:100px; */
            margin:100px;

            
        }
        .box2{
            width:220px;
            height:220px;
            background-color: chartreuse;

        }

    </style>
</head>
<body>
    
    <div class="box1"></div>
    <div class="box2"></div>
    
</body>
</html>